<template>
	<div class="whole">
		<!-- <div class="dia">
			<van-search v-model="agentNo" placeholder="请输入码牌编号" shape="round" :show-action="showAction"
				@search="onSearch" class="search">
			</van-search>
			<div class="" @click="onSearch">
				搜索
			</div>
		</div> -->
		<van-tabs title-active-color="#FF2828" color="#FF2828" @click="tabDitch()" v-model:active="active">
			<van-tab :title="item.channelName" v-for="(item,index) in tabList" :key="index" :name="index" />
		</van-tabs>
		<div class="wrapperCenter">
			<div class="content">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false">
					<empty v-if="!list.length"></empty>
					<div class="dis" v-for="(item,index) in list" :key="index">
						<div class="main" :class="index!=0?'main_top':''">
							<div class="main_d">
								<div class="institution_a">
									<div class="institution">
										订单编号：{{item.flowId}}
									</div>
									<div class="condition">
										机构：<span>{{channelName}}</span>
									</div>
									<div class="condition">
										商户名称：<span>{{item.merchantName}}</span>
									</div>
									<div class="condition">
										终端编号：{{item.terminalSn}}
									</div>
									<div class="condition">
										交易金额：{{item.amount}}
									</div>
									<div class="condition">
										交易手续费：{{item.payFee}}
									</div>
									<div class="condition">
										交易时间：{{item.createTime}}
									</div>
                                    <div class="condition">
                                        交易状态：<span v-if="item.transStatus==0">交易中</span>
                                        <span v-else-if="item.transStatus==1">处理中</span>
                                        <span v-else-if="item.transStatus==2">交易成功</span>
                                        <span v-else-if="item.transStatus==3">交易失败</span>
                                    </div>
								</div>

							</div>
						</div>
					</div>
				</van-list>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		selectPosOrderList,
		selectAgentChannelInf
	} from '@/api/terminal'
	import store from '@/store'
	import {
		showToast,
		showConfirmDialog
	} from 'vant'
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRoute()
			const routers = useRouter()
			const state = reactive({
				channelCode: "",
				active: 0,
				tabList: [],
				pageStart: 1,
				pageSize: 10,
				loading: false,
				finished: false,
				list: [],
				channelName: ""
			})
			
			//获取渠道列表
			const getTabList = () => {
				selectAgentChannelInf({
					channelType:1
				}).then(res => {
					state.tabList = res.data
					state.channelCode=state.tabList[state.active].channelCode
					state.channelName=state.tabList[state.active].channelName
					getList()
				})
			}
			getTabList()
			//tab切换
			const tabDitch = () => {
				state.pageStart=1
				state.list=[]
				state.channelName=state.tabList[state.active].channelName
				state.channelCode=state.tabList[state.active].channelCode
				getList()
			}
			//获取数据
			const getList = () => {
				console.log(router.query)
				console.log(state.channelCode)
				selectPosOrderList({
					channelCode:state.channelCode,
					pageStart: state.pageStart,
					pageSize: state.pageSize
				}).then(res => {
					if (res.data.records.length != 0) {
						if (res.data.records.length < 10) {
							state.finished = true
							state.loading = false
						} else {
							state.pageStart++
							state.finished = false
							state.loading = false
						}
						state.list = state.list.concat(res.data.records)
					} else {
						state.list=[]
						state.finished = true
						state.loading = false
					}
				})
			}
			return {
				...toRefs(state),
				getList,
				getTabList,
				tabDitch
			}
		}
	})
</script>
<style scoped lang="scss">
	.whole {
		height: 100vh;
		background-color: #fff;
		overflow-y: auto;

		.search {
			width: 328px;
			// position: fixed;
			// top: 0;
		}

		.wrapperCenter {
			height: 100vh;
			overflow: scroll;

			.content {

				// padding: 0 10px;
				// padding-bottom:50px;
				// box-sizing: border-box;
				.main {
					width: 339px;
					// height: 62px;
					background: #FFFFFF;
					box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
					border-radius: 6px;
					padding: 12px 0px 12px 0px;
					box-sizing: border-box;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 12px;
					color: #333333;
					margin-top: 12px;

					img {
						width: 23px;
						height: 23px;
						border-radius: 6px;
					}

					.main_d {
						.institution_a {
							padding-left: 12px;
							box-sizing: border-box;
						}
					}

					.institution {
						// width: 150px;
						// white-space: nowrap;
						// text-overflow: ellipsis;
						// overflow: hidden;
					}



					.condition {
						margin-top: 12px;
						// margin-left: 12px;
					}
				}
			}
		}
	}

	::v-deep .van-search__content {
		background-color: #EDF5FF !important;
	}
</style>